import React, { useState } from "react";
import {
  Input,
  InputGroup,
  Button,
  FormControl,
  Box,
  InputLeftElement,
  Checkbox,
  Select,
  Divider,
  Text,
  Flex,
} from "@chakra-ui/react";
import { SiTencentqq } from "react-icons/si";
import { FaUserAlt, FaLock } from "react-icons/fa";
import { BiQuestionMark } from "react-icons/bi";
import { AiFillWechat, AiOutlineWeibo } from "react-icons/ai";
import axios from "axios";
export default function SignIn() {
  const [user, setUser] = useState({
    email: "",
    password: "",
  });
  async function login() {
    console.log(777);
    axios
      .post("https://conduit.productionready.io/users/login", {
        user,
      })
      .then((res) => {
        console.log(res.data, 999);
      });
  }
  return (
    <form>
      <Box w={300} borderRadius="4px" border="1px" borderColor="inherit">
        <FormControl bg="#f8f8f8" p={0}>
          <InputGroup bg="#f8f8f8" variant="flushed">
            <InputLeftElement
              pointerEvents="none"
              bg="#f8f8f8"
              color="#333333"
              borderBottom="1px"
              borderBottomColor="inherit"
              children={<FaUserAlt color="gray.300" />}
            />
            <Input
              bg="#f8f8f8"
              variant="flushed"
              color="#333333"
              onChange={(e) => setUser({ ...user, email: e.target.value })}
              _after={{ background: "#f8f8f8" }}
              placeholder="请输入账号"
            />
          </InputGroup>
        </FormControl>

        <InputGroup bg="#f8f8f8" variant="flushed">
          <InputLeftElement
            pointerEvents="none"
            bg="#f8f8f8"
            color="#333333"
            children={<FaLock />}
          />
          <Input
            type="password"
            placeholder="请输入密码"
            bg="#f8f8f8"
            variant="flushed"
            borderBottom="0px"
            onChange={(e) => setUser({ ...user, password: e.target.value })}
            borderBottomColor="inherit"
            color="#333333"
            _after={{ background: "#f8f8f8" }}
          />
        </InputGroup>
      </Box>
      <Box
        display="flex"
        flexDirection="row"
        alignItems="center"
        justifyContent="space-between"
        margin="15px 0"
      >
        <Checkbox defaultIsChecked>记住我</Checkbox>
        <Select
          variant="unstyled"
          placeholder="登录遇到哪些问题"
          fontSize="14px"
          w=""
          color="#999999"
          icon={<BiQuestionMark fontSize="14px" />}
        ></Select>
      </Box>
      <Button
        marginTop="20px"
        borderRadius="999px"
        _hover={{ bgColor: "#187cb7" }}
        w="100%"
        color="#FFFFFF"
        onClick={login}
        bgColor="#3194d0"
      >
        登录
      </Button>
      <Flex
        alignItems="center"
        flexDirection="row"
        justifyContent="center"
        marginTop="50px"
        marginBottom="10px"
      >
        <Divider w="60px" marginRight="30px" color="#b5b5b5" />
        <Text
          color="#b5b5b5"
          style={{
            position: "relative",
            fontSize: "12px",
          }}
        >
          社交帐号登录
        </Text>
        <Divider w="60px" marginLeft="30px" color="#b5b5b5" />
      </Flex>
      <Flex
        alignItems="center"
        marginBottom="10px"
        flexDirection="row"
        justifyContent="center"
      >
        <Box
          w="50px"
          h="50px"
          textAlign="center"
          d="flex"
          alignItems="center"
          flexDirection="row"
          justifyContent="center"
        >
          <AiOutlineWeibo
            fontSize="28px"
            cursor="pointer"
            color="#e05244"
          ></AiOutlineWeibo>
        </Box>
        <Box
          w="50px"
          h="50px"
          textAlign="center"
          d="flex"
          alignItems="center"
          flexDirection="row"
          justifyContent="center"
        >
          <AiFillWechat
            fontSize="28px"
            cursor="pointer"
            color="#00bb29"
          ></AiFillWechat>
        </Box>
        <Box
          w="50px"
          h="50px"
          textAlign="center"
          d="flex"
          alignItems="center"
          flexDirection="row"
          justifyContent="center"
        >
          <SiTencentqq
            fontSize="28px"
            cursor="pointer"
            color="#498ad5"
          ></SiTencentqq>
        </Box>
      </Flex>
    </form>
  );
}
